<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view style="padding:20rpx 25rpx;" id="nav">
				<graceNavBar activeLineBg="#EB5D4B" textAlign="center" activeDirection="center" :items="tabs" :currentIndex="swiperCurrentIndex" @change="navChange"></graceNavBar>
			</view>
			<view class="my_coupon_list">
				<graceEmpty v-if="(nouse.length==0&&swiperCurrentIndex==0)||(used.length==0&&swiperCurrentIndex==1)||(cantuse.length==0&&swiperCurrentIndex==2)">
					<view slot="img" class="empty-view">
						<!-- 请根据您的项目要求制作并更换为空图片 -->
						<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
					</view>
					<text slot="text" class="grace-text-small grace-gray">抱歉，没有数据</text>
				</graceEmpty>
			  <view class="my_coupon_item" v-for="item in nouse" v-if="swiperCurrentIndex==0" :key="item.coupon_id">
			    <view class="coupon_info">
			      <view :class="[item.istype==2?'men':'',item.istype==1?'app':'',item.istype==1?'all':'']">
			        <!-- <view class="zhe">
			          <text>5</text>
			          <text>折</text>
			        </view> -->
			        <view class="jia">
			          <text>¥</text>
			          <text>{{item.disprice}}</text>
			        </view>
			        <text v-if="item.istype==2">限门店使用</text>
			        <text v-if="item.istype==1">限APP使用</text>
			        <text v-if="item.istype==3">通用券</text>
			      </view>
			      <view>
			        <text>{{item.coupon_name}}</text>
			        <text>2020.02.02-2020.09.08</text>
			      </view>
			    </view>
			    <view class="intro_info">{{item.description}}</view>
			  </view>
			  <view class="my_coupon_item my_coupon_item_over" v-for="item in used" v-if="swiperCurrentIndex==1" :key="item.coupon_id">
			    <view class="coupon_info">
			      <view class="app">
			        <view class="jia">
			          <text>¥</text>
			          <text>{{item.disprice}}</text>
			        </view>
			        <text v-if="item.istype==2">限门店使用</text>
			        <text v-if="item.istype==1">限APP使用</text>
			        <text v-if="item.istype==3">通用券</text>
			      </view>
			      <view>
			        <text>{{item.coupon_name}}</text>
			        <text>2020.02.02-2020.09.08</text>
			      </view>
			    </view>
			    <view class="intro_info">{{item.description}}</view>
			  </view>
			  <view class="my_coupon_item my_coupon_item_over" v-for="item in cantuse" v-if="swiperCurrentIndex==2" :key="item.coupon_id">
			    <view class="coupon_info">
			      <view class="app">
			        <view class="jia">
			          <text>¥</text>
			          <text>{{item.disprice}}</text>
			        </view>
			        <text v-if="item.istype==2">限门店使用</text>
			        <text v-if="item.istype==1">限APP使用</text>
			        <text v-if="item.istype==3">通用券</text>
			      </view>
			      <view>
			        <text>{{item.coupon_name}}</text>
			        <text>2020.02.02-2020.09.08</text>
			      </view>
			    </view>
			    <view class="intro_info">{{item.description}}</view>
			  </view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
export default {
	data() {
		return {
			list: [],
			tabs : [ '未使用', '已使用', '已过期'],
			swiperCurrentIndex:0,
			nouse:[],
			used:[],
			cantuse:[]
		};
	},
	onLoad() {
		this.getData()
	},
	methods: {
		navChange: function (e) {
			this.swiperCurrentIndex = e;
		},
		getData: function () {
			this.gRequest.post('/coupon/myCoupon', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
			},"form",{}, res => {
				this.setData({ 
					nouse: res.data.nouse ,
					used: res.data.used ,
					cantuse: res.data.cantuse 
				});
			});
		}
	},
	components: {
		gracePage,
		graceNavBar,
		graceEmpty
	}
};
</script>
<style>
page {
}
.empty-view {
	width: 280rpx;
	height: 280rpx;
	border-radius: 280rpx;
	background-color: #f6f7f8;
	margin-top: 200rpx;
}
.empty-img {
	width: 220rpx;
	height: 200rpx;
	margin: 40rpx;
	border-radius: 200rpx;
}
.grace-text-small {
	margin-top: 10px;
}
</style>

<style lang="scss">
  .my_coupon_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 5.333vw;
  }

  .my_coupon_item {
    width: 100%;
    height: auto;
    border-radius: 3vw;
    overflow: hidden;
    background-color: #FFFFFF;
    padding: 0 3vw;
    padding-bottom: 4vw;
    margin-top: 4vw;
    box-shadow: 0px 0px 1.5vw 0px rgba(0, 0, 0, 0.5);
  }

  .my_coupon_item .coupon_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px dashed #CCCCCC;
    padding-bottom: 2vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>view {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 1vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1).men {
    color: #81A5F9;
  }

  .my_coupon_item .coupon_info>view:nth-child(1).app {
    color: #EB5D4B;
  }

  .my_coupon_item .coupon_info>view:nth-child(1).all {
    color: #56BB76;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>view.zhe>text:nth-child(1) {
    font-size: 8.5333vw;
    font-weight: 600;
    margin-right: 0.5vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>view.zhe>text:nth-child(2) {
    font-size: 3.733vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>view.jia>text:nth-child(1) {
    font-size: 3.2vw;
    font-weight: 600;
    margin-right: 0.5vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>view.jia>text:nth-child(2) {
    font-size: 8.5333vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(1)>text {
    width: 20vw;
    height: 6vw;
    text-align: center;
    line-height: 6vw;
    border-radius: 6vw;
    font-size: 3.2vw;
    color: #FFFFFF;
  }

  .my_coupon_item .coupon_info>view:nth-child(1).men>text {
    background: linear-gradient(135deg, rgba(137, 177, 242, 1) 0%, rgba(185, 206, 247, 1) 100%);
  }

  .my_coupon_item .coupon_info>view:nth-child(1).app>text {
    background: linear-gradient(94deg, rgba(235, 93, 75, 1), rgba(253, 129, 95, 1));
  }

  .my_coupon_item .coupon_info>view:nth-child(1).all>text {
    background: linear-gradient(94deg, #55bb76, #70e19b);
  }

  .my_coupon_item .coupon_info>view:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 15.0667vw;
    margin-top: 2vw;
    margin-left: 4vw;
  }

  .my_coupon_item .coupon_info>view:nth-child(2) text:nth-child(1) {
    font-size: 3.733vw;
    font-weight: 600;
    color: #333333;
  }

  .my_coupon_item .coupon_info>view:nth-child(2) text:nth-child(2) {
    font-size: 3.2vw;
    color: #666666;
  }

  .my_coupon_item .intro_tip {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1vw;
    font-size: 3.2vw;
    color: #999999;
  }

  .my_coupon_item .intro_tip img.right {
    width: 2.13vw;
    height: auto;
  }

  .my_coupon_item .intro_tip img.down {
    width: 3.4667vw;
    height: auto;
  }

  .my_coupon_item .intro_info {
    color: #666666;
    font-size: 3.733vw;
    font-weight: 600;
    line-height: 4.5vw;
    margin-top: 2vw;
  }

  .my_coupon_item_over .coupon_info>view:nth-child(1).men,
  .my_coupon_item_over .coupon_info>view:nth-child(1).app {
    color: #999999;
  }

  .my_coupon_item_over .coupon_info>view:nth-child(1).app>text,
  .my_coupon_item_over .coupon_info>view:nth-child(1).men>text {
    background: linear-gradient(94deg, rgba(153, 153, 153, 1), rgba(244, 244, 244, 1));
  }

  .my_coupon_item_over .coupon_info>view:nth-child(2) text:nth-child(1),
  .my_coupon_item_over .coupon_info>view:nth-child(2) text:nth-child(2) {
    color: #999999;
  }

  .my_coupon_item_over .intro_info {
    color: #999999;
  }
</style>

